<style lang="less" scoped>
    @import '../../styles/common.less';
    @import '../../styles/loading.less';
</style>

<template>
    <div>
        <div class="main-table">
            <Table border :columns="columns" :data="data"></Table>
        </div>
        <div class="pagination">
            <Page :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="loadList"
                  show-total show-elevator></Page>
        </div>
        <Modal
                v-model="editModal"
                :title="(isRead ? '查看' : (formData.id ? '修改': '新增')) + '结算工资'"
                @on-ok="editModal = false"
                @on-cancel="editModal = false"
                :mask-closable="isRead"
                :closable="isRead"
                width="40%">
            <Row>
                <Col span="24">
                <h3>课时结算工资=<Input v-model="formData.countMoney" :clearable="!isRead" :readonly="isRead" style="width: 10%"></Input></h3>
                <h3 style="color: red">   tips：课时结算工资=（每个教师所教的单个班级课表上课次数*该班级标准费用 -该教师停课或代课次数*该停课或代课班级的标准费用）*税率</h3>
                </Col>
            </Row>
        </Modal>
    </div>
</template>

<script>
    import util from '@/libs/util';
    import Cookies from 'js-cookie';

    export default {
        name: 'exportable-table',
        data () {
            return {
                columns: [{
                    title: '序号',
                    key: 'rownum',
                    align: 'center',
                    width: 60,
                    render: (h, params) => {
                    return h('div', {}, ((this.pageIndex - 1) * this.pageSize + params.index + 1));
        }
        }, {
                title: '姓名',
                    key: 'name'
            }, {
                title: '开户银行',
                    key: 'depositBank'
            }, {
                title: '手机号',
                    key: 'cellphone'
            },  {title: '操作',
                key: 'action',
                width: 200,
                align: 'center',
                render: (h, params) => {
                return h('div', [
                h('Button', {
                    props: {
                        type: 'primary',
                        size: 'small'
                    },
                    style: {
                        marginRight: '5px'
                    },
                    on: {
                        click: () => {
                            this.isRead = false;
                            this.editModal = false;
                            util.ajax.post('/busine/tescher/info/countMoney', util.toFormData(
                                {id: params.row.id}
                            )).then(res => { // 获得区域数据
                                if (res.data.code == 200) {
                                    // this.$refs['formData'].resetFields();
                                    // var data = res.data.data;
                                    this.detail(params.row);
                                }
                            });
                        }
                    }
                }, '课时结算')
                ]);
                }
                }],
                data: [],
                formData: {},
                query: {name: ''},
                total: 0,
                pageIndex: 1,
                pageSize: 10,
                editModal: false,
                isRead: false
            };
        },
        mounted () {
            this.loadList();
        },
        methods: {
            loadList () {
                util.ajax.post('/busine/tescher/info/list', util.toFormData({
                    page: this.pageIndex,
                    size: this.pageSize,
                    name: this.query.name
                })).then(res => {
                    this.data = res.data.data.list;
                this.total = res.data.data.total;
            });
            },
            detail (obj) {
                this.isRead = true;
                this.formData = {};
                util.ajax.post('/busine/tescher/info/detail', util.toFormData({
                    id: obj.id
                })).then(res => {
                if (res.data.data) {
                    this.formData = res.data.data;
                    this.editModal = true;
                } else {
                    this.$Modal.error({
                        title: '警告',
                        content: '出错了'
                    });
                }
            });
            }
        }
    }

</script>